<template>
  <el-tabs v-if="tabs.length" v-model="activeName" @tab-click="tabClick">
    <el-tab-pane
      v-for="(item, index) in tabs"
      :key="index"
      :label="item.label"
      :name="item.name"
    >
      <span
        slot="label"
      >{{ item.label
      }}<el-badge
        v-if="item.name === activeName && !loading"
        type="primary"
        style="margin-left: 10px;"
        :value="total"
      /></span>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import bus from '@/utils/bus';
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    loading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      activeName: '',
      tabs: [],
      tabsMap: {
        Orders: [
          { label: 'Pending', name: 'PENDING' },
          { label: 'Confirmed', name: 'CONFIRM' },
          { label: 'All', name: 'ALL' }
        ],
        Shipping: [
          { label: 'Unfulfill', name: 'UNSHIPPED' },
          { label: 'Fulfilled', name: 'SHIPPED' }
        ]
      }
    };
  },
  mounted() {
    if (this.tabsMap[this.$route.name]) {
      this.activeName = this.tabsMap[this.$route.name][0].name;
      this.tabs = this.tabsMap[this.$route.name];
    }
  },
  methods: {
    tabClick(tab) {
      bus.$emit('pageChange', tab.name);
    }
  }
};
</script>
<style lang="scss" scoped></style>
